<template>
  <div class="file-upload-container">
    <h1>测试10 - 文件上传</h1>
    
    <div class="upload-form">
      <div class="form-group">
        <label for="filePath">文件路径：</label>
        <div class="file-input-wrapper">
          <input 
            id="filePath" 
            v-model="filePath" 
            type="text" 
            class="file-path-input" 
            placeholder="请选择文件路径" 
            readonly
          />
          <button @click="browseFile" class="browse-btn">浏览</button>
          <input 
            ref="fileInput" 
            type="file" 
            style="display: none" 
            @change="handleFileSelect" 
          />
        </div>
      </div>
      
      <button 
        @click="uploadFile" 
        class="upload-btn" 
        :disabled="!selectedFile || isUploading"
      >
        {{ isUploading ? '上传中...' : '上传文件' }}
      </button>
      
      <div v-if="uploadProgress > 0" class="progress-container">
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            :style="{ width: uploadProgress + '%' }"
          ></div>
        </div>
        <span class="progress-text">{{ uploadProgress }}%</span>
      </div>
      
      <div v-if="uploadStatus" class="status-message" :class="uploadStatusType">
        {{ uploadStatus }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { FileUploader } from '@/views/documentManager/components/ts/BigFileUpload';
import { message } from '@/utils/ElmessasgeUtils';

// 文件路径（默认填充一个示例路径）
const filePath = ref<string>('E:\\Project_Java\\ToolSystem\\Eureka\\target\\Eureka-0.0.1-SNAPSHOT.jar');

// 文件输入框引用
const fileInput = ref<HTMLInputElement>();

// 选中的文件
const selectedFile = ref<File | null>(null);

// 上传状态
const isUploading = ref<boolean>(false);
const uploadProgress = ref<number>(0);
const uploadStatus = ref<string>('');
const uploadStatusType = ref<'success' | 'error'>('success');

// 浏览文件
const browseFile = () => {
  fileInput.value?.click();
};

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    selectedFile.value = target.files[0];
    filePath.value = selectedFile.value.name; // 显示文件名而不是完整路径（浏览器安全限制）
    
    // 重置上传状态
    uploadProgress.value = 0;
    uploadStatus.value = '';
  }
};

// 上传文件
const uploadFile = async () => {
  // 如果还没有选择文件但路径已填充，自动触发文件选择对话框
  if (!selectedFile.value && filePath.value) {
    message('正在尝试选择文件...');
    // 触发文件选择对话框，让用户手动确认选择文件
    fileInput.value?.click();
    return;
  }

  if (!selectedFile.value) {
    message('请先选择文件');
    return;
  }

  isUploading.value = true;
  uploadProgress.value = 0;
  uploadStatus.value = '';
  
  try {
    // 创建FileUploader实例并上传文件
    // 注意：这里使用默认的bucketName和path，实际项目中可能需要根据实际情况修改
    const uploader = new FileUploader(
      selectedFile.value,
      'public', // 默认bucketName
      '', // 默认路径
      (progress) => {
        // 更新上传进度
        uploadProgress.value = progress.percentage;
      },
      (mergeRes) => {
        // 上传成功
        isUploading.value = false;
        uploadProgress.value = 100;
        uploadStatus.value = '文件上传成功！';
        uploadStatusType.value = 'success';
        console.log('文件上传成功:', mergeRes);
        message('文件上传成功');
      },
      (error) => {
        // 上传失败
        isUploading.value = false;
        uploadStatus.value = `上传失败: ${error}`;
        uploadStatusType.value = 'error';
        console.error('文件上传失败:', error);
        message(`文件上传失败: ${error}`);
      }
    );
    
    // 开始上传
    await uploader.startUpload();
  } catch (error) {
    isUploading.value = false;
    uploadStatus.value = '上传过程中发生错误';
    uploadStatusType.value = 'error';
    console.error('上传异常:', error);
    message('上传过程中发生错误');
  }
};
</script>

<style scoped>
.file-upload-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.upload-form {
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.file-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.file-path-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
}

.browse-btn,
.upload-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.browse-btn {
  background-color: #67c23a;
  color: white;
}

.browse-btn:hover {
  background-color: #85ce61;
}

.upload-btn {
  background-color: #409eff;
  color: white;
  width: 100%;
  padding: 12px;
  font-size: 16px;
}

.upload-btn:hover:not(:disabled) {
  background-color: #66b1ff;
}

.upload-btn:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.progress-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  color: #606266;
  width: 50px;
  text-align: right;
}

.status-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.status-message.success {
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.status-message.error {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}
</style>